<!DOCTYPE html>
<html ng-app="TweetSearch">
  <head >
    <link rel="icon" type="image/png" href="../../artwork/favicon.png">
    <title>AggregationResults
    </title>
    <link href="css/style.css" rel="stylesheet"/>
    <link href="css/bootstrap.min.css" rel="stylesheet"/>
    <link rel="stylesheet" href="css/introjs.min.css"/>
    <script src="../../js/jquery.min.js"></script>
    <script src="../../js/angular.min.js"></script>
    <script src="js/intro.min.js"></script>
  </head>
  <body>
    <a href="index.html">
      <img style="height: 50px; width: 50px" src="img/home.png"/>
    </a>
    <center>
      <h1>The top five tweeters using search aggregations
      </h1>
      <br>
      <div class="wrapper" ng-controller="Controller">
        <div class="form-group first">
          <label class="col-md-4 control-label">Hashtag
          </label>
          <div class="col-md-6">
            <input id="query" ng-model="query" type="text" placeholder="Search Loklak"
                   class="form-control input-md query">
          </div>
          <button href='#' class="btn btn-default" type="button" id="button"
                  ng-click="SearchLoklak()">Search
          </button>
        </div>
        <div class="form-group second">
          <label class="col-md-4 control-label" for="from">Since Date
          </label>
          <div class="col-md-6">
            <input id="since" name="since" type="date" ng-model="since"
                   placeholder="Enter Since date here" class="form-control input-md fromDate">
          </div>
        </div>
        <div class="form-group third">
          <label class="col-md-4 control-label" for="from">Until Date
          </label>
          <div class="col-md-6">
            <input id="until" name="until" type="date" ng-model="until"
                   placeholder="Enter Until date here" class="form-control input-md toDate">
          </div>
        </div>
        <br/>
        <br/>
        <div ng-if="spinner && !leaderboard">
          <img src="loading.gif" height="400" width="400"/>
        </div>
        <br>
        <br>
        <br>
        <table>
          <tr ng-if="leaderboard">
            <th style="text-align: center;">UserName
            </th>
            <th style="text-align: center;">Number of Tweets
            </th>
          </tr>
          <tr ng-repeat="value in leaderboard | limitTo:5" class="results">
            <td>{{value[0]}}
            </td>
            <td>{{value[1]}}
            </td>
          </tr>
        </table>
      </div>
    </center>
    <script>
      $(function(){
        var introguide = introJs();
        introguide.setOptions({
          steps: [
            {
              element: '.results',
              intro: 'This feature helps you to count up all the tweets which are indexed. \
                      This feature will not consider remote search results. Therefore the remote \
                      search is switched off by source=cache and the search results are switched \
                      off with count=0',
              position: 'bottom'
            }
            ,
            {
              element: '.query',
              intro: 'Mention the hashtag which you want to search for',
              position: 'bottom'
            }
            ,
            {
              element: '.fromDate',
              intro: 'Since the search results are huge you can limit the search by \
                      defining the dates.',
              position: 'bottom'
            }
            ,
            {
              element: '.toDate',
              intro: 'The limitation must have a difference of 4 days. So choose the end \
                      date accordingly.',
              position: 'bottom'
            }
          ]
        });
        introguide.start();
      });
    </script>
    <script>
      var app = angular.module('TweetSearch', []);
      app.controller('Controller', ['$scope', '$http', '$sce', function($scope, $http, $sce) {
        $scope.SearchLoklak = function() {
          var mnths = {
            Jan:"01", Feb:"02", Mar:"03", Apr:"04", May:"05", Jun:"06",
            Jul:"07", Aug:"08", Sep:"09", Oct:"10", Nov:"11", Dec:"12"
          };
          if($scope.until && $scope.since){
            date = ($scope.until + "").split(" ");
            var until = [ date[3], mnths[date[1]], date[2] ].join("-");
            date2 = ($scope.since + "").split(" ");
            var since = [ date2[3], mnths[date2[1]], date2[2] ].join("-");
            var QueryCommand = 'https://api.loklak.org/api/search.json?callback=JSON_CALLBACK&q=' +
                               $scope.query + ' since:'+ since + ' until:' +
                               until + '&source=cache&count=0&fields=mentions';
          }
           var QueryCommand = 'https://api.loklak.org/api/search.json?callback=JSON_CALLBACK&q=' +
                              $scope.query + '&source=cache&count=0&fields=mentions';
          $scope.spinner=true;
          $http.jsonp(String(QueryCommand)).success(function(response) {
            var data = response;
            var hashtag = data.aggregations.mentions;
            var users = [];
            for(key in hashtag){
              users.push([key, hashtag[key]]);
            }
            $scope.leaderboard = users;
          });
        }
        $scope.spinner = false;
      }
    ]);
    </script>
  </body>
</html>
